<template>
<div @click.stop="stopPropagation()" v-show="visible" class="dialog" :style="{transform: toggleStyle(), top: isSelfCard ? '-100px' : '0'}">
  <div class="user">
    <div class="user-img">
      <img src="@/assets/user/2.svg" />
    </div>
    <div class="user-info">
      <p class="user-info-name"><span>{{userInfo.name}}</span><span style="font-size: 12px; margin-right: 10px">胜率：{{userInfo.odds}}</span></p>
      <p class="user-info-record"><span style="margin-right: 20px;">胜：{{userInfo.win}}</span><span>败：{{userInfo.lose}}</span></p>
    </div>
  </div>
  <ul class="animation">
    <li v-for="(item,index) in list" :key="index" @click="makeAnimation(index)" class="animation-img"><img :src="item" /></li>
  </ul>
</div>
</template>
<script>
const staticSrc = "http://127.0.0.1:3038/emotion/";

export default {
  props: {
    position: String,
    visible: {
      type: Boolean,
      default: false
    },
    isSelfCard: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default() {
        return {
          name: 'record',
          img: '@/assets/user/2.svg',
          win: 23,
          lose: 34,
          odds: '45%'
        }
      }
    },
    selfEl: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    toggleStyle(){
      let style = '';
      switch(this.position) {
        case 'left':
          style = 'translateX(-360px)';
          break;
        case 'right':
          style = 'translateX(100px)';
          break;
        default:
          style = 'translateX(100px)';
          break;
      }
      return style
    },
    makeAnimation(index){
      let count = index + 1;
      let indexString = (this.iconString + count).toString()
      this.$emit('update:visible', false);
      this.$emit('makeAnimation',indexString, this.toEl, this.userInfo.name);
      // this.$socket.emit("animation", {
      //   index,
      //   name: this.userInfo.name
      // })
      // if(this.visible){
      //   if(this.isSelfCard){
      //     console.log("这里呢");
      //     this.$socket.emit("animation", {
      //       index,
      //       name: this.userInfo.name
      //     })
      //   }
      // }else{
      //   console.log("会不会触发这里");
      //   this.$socket.emit("animation", {
      //     index,
      //     name: this.userInfo.name
      //   })
      // }
    },
    stopPropagation(){}
  },
  computed: {
    iconString() {
      return this.isSelfCard ? 'self_' : 'other_'
    },
    list(){
      return this.isSelfCard ? 
      [
        `${staticSrc}self_emotion_icon_cool.png`,
        `${staticSrc}self_emotion_icon_crazy.png`,
        `${staticSrc}self_emotion_icon_cry.png`,
        `${staticSrc}self_emotion_icon_laugh.png`,
      ] :
      [
        `${staticSrc}other_emotion_icon_gate.png`,
        `${staticSrc}other_emotion_icon_rose.png`,
        `${staticSrc}other_emotion_icon_money.png`,
        `${staticSrc}other_emotion_icon_kiss.png`,
      ]
    },
    toEl(){
      return this.selfEl + 'Img'
    }
  }
};
</script>
<style lang="stylus" scoped>
.dialog
  width 350px
  height 200px
  border 1px solid yellow
  background-color blue
  position absolute
  top 0px
  left 0
  font-size 14px
  border-radius 10px
  padding 10px
  box-sizing border-box
  &:hover
    box-shadow 2px 2px 10px #cccccc
  .user
    width 100%
    height 100px
    display flex
    align-items center
    &-img
      width 50px
      height 50px
      border 1px solid #ccc
      border-radius 50%
      margin 0 10px
      img
        width 100%
        height 100%
        border-radius 50%
    &-info
      flex 1
      height 50px
      display flex
      flex-direction column
      justify-content space-between
      &-name
        display flex
        justify-content space-between
  .animation
    width 100%
    height 100px
    padding-top 10px
    display flex
    justify-content space-around
    border-top 1px solid white
    &-img
      width 60px
      height 60px
      border 1px solid #ccc
      border-radius 50%
      &:hover
        box-shadow 2px 2px 5px #888888
      img
        width 100%
        height 100%
        border-radius 50%
        cursor pointer
</style>